import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;


@Component({
  selector: 'chart-ofault',
  template: `
  <div id="ofault" style="height:400px;width: 100%; overflow: hidden; position: relative; z-index: 0;"></div>
  `,
})
export class OFaultComponent implements OnInit, OnChanges{
  @Input() public deviceId:string;
  @Input() public date:any;
  option;

  private action:string = '';
  private params:any;

  private ti_cn:string = '设备故障次数-日、月、年';
  private mt_cn:string = '故障次数(次)';
  private tf_cn:string = "故障次数:";
  private sm_cn:string = '故障次数';
  private ti_en:string = 'Breakdown Times-day, month, year';
  private mt_en:string = 'Breakdown Times(times)';
  private tf_en:string = "Breakdown Times:";
  private sm_en:string = 'Breakdown Times';

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.paintOFault();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.date.currentValue == undefined) return;
    this.params.date_str = changes.date.currentValue.time;
    this.params.type = changes.date.currentValue.type;
    this.getData();
  }

  getData(){
    this.httpRequest.sendGet(this.action,this.params).subscribe(res => {
      if(localStorage.getItem('language') == 'en'){
        this.ofault(this.ti_en,this.mt_en,this.tf_en,this.sm_en,res);
      }
      else{
        this.ofault(this.ti_cn,this.mt_cn,this.tf_cn,this.sm_cn,res);
      }
    },err => console.log(err));
  }

  paintOFault(){
    let date = new Date();
    let ofday = date.getDate();
    let ofmonth = date.getMonth()+1;
    let ofyear = date.getFullYear();
    let time = ofyear + '-' + ofmonth  + '-' + ofday;

    if(this.deviceId){
      this.action = 'stat/djgzcstj';
      this.params = {'date_str':time,device_id:this.deviceId,'type':'hour'};
    }
    else{
      this.action = 'stat/cstj';
      this.params = {'date_str':time,'type':'hour'};
    }

    this.getData();
  }


  ofault(ti,mt,tf,sm,data){
    $('#ofault').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: ti
      },

      xAxis: {
        type: 'category',
        labels: {
          rotation: -45,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: mt
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: tf + '<b>{point.y} 次</b>'
      },
      series: [{
        color:'#f13636',
        name: sm,
        data: data,
        dataLabels: {
          enabled: true,
          // rotation: -90,
          color: '#FFFFFF',
          align: 'right',
          format: '{point.y}', // one decimal
          y: 0, // 10 pixels down from the top
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
          }
        }
      }]
    });
  }
}
